<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
        <style type="text/css">
            .list-container { border: 1px solid grey ; margin: 50px ;  }
            .list-container>* { border: 1px solid blue ; margin: 10px ;  }
            .list-container>* li { border: 1px solid red ; }

            .first ul li { /* 注意这里是针对 li */
                list-style: none ;
                margin-left: 0px ; /* 设置 li 左侧外边距 */
            }

            .second ul { /* 注意这里是针对 ul */
                list-style: none ;
                padding-left: 0px ; /* 设置 ul 或 ol 左侧内边距 */
                /* 在 早期的 IE 中，这个空白被解释为 ul 或 ol 的左侧外边距，所以针对早期 IE 还得添加 margin-left : 0 ; */
            }

            .third ul { /* 注意这里是针对 ul */
                list-style: none ; /* 取消所有的列表样式 ( 不显示项目符号 ) */
                padding-left: 0px ;
            }

            .third ul li { margin: 15px ;  }

        </style>
    </head>
    <body>

        <div class="list-container first">
            <ul>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ul>
        </div>

        <div class="list-container second">
            <ul>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ul>
        </div>

        <div class="list-container third">
            <ul>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ul>
        </div>
        
    </body>
</html>